<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="grid-content ">
          <div class="block" style="float: right">
            <span class="demonstration">请选择周数：</span>
            <el-date-picker
              v-model="week"
              type="week"
              format="yyyy年第WW周"
              placeholder="选择周数"
              :picker-options="pickerOptions"
              @change="pickerChange"
            />
          </div>
          <div class="clear" />
          <div id="main" style="height:260px;width:100%" />
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <div id="left" style="height:400px;width:100%" />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light" />
        <div id="right" style="height:400px;width:100%" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import moment from 'moment'
import { getChangeWeek, getInspectorWeek, getTypeWeek } from '@/api/statistics/week'
import * as echarts from 'echarts/core'
import {
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  MarkPointComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent
} from 'echarts/components'
import { BarChart, LineChart, PieChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use(
  [TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent, MarkLineComponent, MarkPointComponent, LineChart, CanvasRenderer, BarChart, PieChart]
)

export default {
  data() {
    return {
      main: null,
      left: null,
      right: null,
      mainOption: [],
      leftOption: [],
      rightOption: [],
      week: moment().week(moment().week() - 1).startOf('isoWeek').valueOf(),
      pickerOptions: {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return moment(time.getTime()).format('YYYY-MM-DD') >= moment(moment().startOf('isoWeek')).format('YYYY-MM-DD')
        }
      }
    }
  },
  mounted() {
    this.main = echarts.init(document.getElementById('main'))
    this.left = echarts.init(document.getElementById('left'))
    this.right = echarts.init(document.getElementById('right'))
    console.log('week', moment(this.week).format('YYYY-MM-DD'))
    console.log('dddd', moment(this.week).format('YYYY年第WW周'))
    this.doChangeDay({
      'date': moment(this.week).format('YYYY-MM-DD')
    })
    this.doInspectorDay({
      'date': moment(this.week).format('YYYY-MM-DD')
    })
    this.doTypeDay({
      'date': moment(this.week).format('YYYY-MM-DD')
    })
  },
  methods: {
    pickerChange() {
      console.log('week', moment(this.week).format('YYYY-MM-DD'))
      console.log('dddd', moment(this.week).format('YYYY年第WW周'))
      this.doChangeDay({
        'date': moment(this.week).format('YYYY-MM-DD')
      })
      this.doInspectorDay({
        'date': moment(this.week).format('YYYY-MM-DD')
      })
      this.doTypeDay({
        'date': moment(this.week).format('YYYY-MM-DD')
      })
    },
    doChangeDay(param) {
      getChangeWeek(param).then(response => {
        const { data } = response
        this.mainOption = {
          title: {
            text: '事件数变化情况',
            subtext: moment(this.week).format('YYYY年第WW周')
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['新增事件', '处理事件']
          },
          toolbox: {
            show: true,
            feature: {
              dataView: { readOnly: false },
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} 个'
            }
          },
          series: [
            {
              name: '新增事件',
              type: 'line',
              data: data.newCount
            },
            {
              name: '处理事件',
              type: 'line',
              data: data.handCount
            }
          ]
        }
        this.main.setOption(this.mainOption)
      })
    },
    doInspectorDay(param) {
      getInspectorWeek(param).then(response => {
        const { data } = response
        console.log(data)
        this.leftOption = {
          title: {
            text: '巡查员处理情况',
            subtext: moment(this.week).format('YYYY年第WW周')
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['分配事件', '处理事件']
          },
          toolbox: {
            show: true,
            feature: {
              dataView: { readOnly: false },
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: data.inspectorName
          },
          series: [
            {
              name: '分配事件',
              type: 'bar',
              data: data.assignCount
            },
            {
              name: '处理事件',
              type: 'bar',
              data: data.handCount
            }
          ]
        }
        this.left.setOption(this.leftOption)
      })
    },
    doTypeDay(param) {
      getTypeWeek(param).then(response => {
        const { data } = response
        this.rightOption = {
          title: {
            text: '事件分类',
            subtext: moment(this.week).format('YYYY年第WW周'),
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          toolbox: {
            show: true,
            feature: {
              dataView: { readOnly: false },
              saveAsImage: {}
            }
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '50%',
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        this.right.setOption(this.rightOption)
      })
    }
  }
}
</script>
<style>
  .clear {
    clear: both
  }
</style>
